<template>
  <div class="app-container">
    <!-- <div class="header_title_box">
      <h2>库存预警（补货）</h2>
    </div> -->
    <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch" />
    <div class="select_flex">
      <div class="operation_button_box">
        <el-button v-action="'salesWarning@replenishmentExport'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="small" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
          重置
        </el-button>
        <!-- <el-button @click="isActive=!isActive">{{ isActive?'展开':'收起' }}</el-button> -->
      </div>
    </div>
    <div v-loading="loading">
      <el-table :data="data" border fit :row-class-name="tableRowClassName" :max-height="screenHeigh">
        <!-- <el-table-column type="selection" width="51" align="center" /> -->
        <el-table-column label="系统sku" prop="code" align="center" width="180" />
        <el-table-column label="中文名称" prop="name_ch" align="center" width="180" />
        <el-table-column label="英文名称" prop="name_en" align="center" width="185" />
        <el-table-column label="即时库存" prop="stock" align="center" width="312" />
        <el-table-column label="在途库存" prop="transStock" align="center" min-width="278" />
        <el-table-column label="后三个月的销售之和" prop="salse" align="center" width="287" />
        <el-table-column label="预警" prop="check_date" align="center" min-width="264" />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="销量预警（补货）导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import { action } from '@/directive/permission/index.js' // 权限判断指令
import formOperate from '../../../layout/mixin/formOperate'
// import { downloadxlsx } from '@/utils/index'
import DownModul from '@/components/DownModul/index.vue'
import FormSelections from '@/components/FormSelection'
import cacheList from '@/layout/mixin/cacheList'
export default {
  name: 'SalesWarningReplenishment',
  directives: {
    action
  },
  components: { DownModul, FormSelections },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 355,
      exportUrl: 'sales-warning/replenishment-export',
      //   screenHeigh: document.body.clientHeight - 150,
      componentName: 'SalesWarningReplenishment',
      url: '/sales-warning/replenishment',
      formItems: [
        {
          label: '系统sku',
          key: 'code',
          type: 'input',
          placeholder: '请输入系统sku'
        },
        {
          label: '中文名',
          key: 'name_ch',
          type: 'input',
          placeholder: '请输入中文名'
        },
        {
          label: '英文名',
          key: 'name_en',
          type: 'input',
          placeholder: '请输入英文名'
        }
        // {
        //   label: '仓库名称',
        //   key: 'warehouse',
        //   type: 'input',
        //   placeholder: '请输入仓库名称'
        // }
      ],
      queryParam: {
        code: '',
        name_ch: '',
        name_en: ''
      },
      optionsModul: [
        {
          key: 'code',
          label: '系统sku'
        },
        {
          key: 'name_ch',
          label: '中文名称'
        },
        {
          key: 'name_en',
          label: '英文名称'
        },
        {
          key: 'stock',
          label: '即时库存'
        },
        {
          key: 'transStock',
          label: '在途库存'
        },
        {
          key: 'salse',
          label: '后三月销售之和'
        },
        {
          key: 'check_date',
          label: '预警'
        }
      ]
    }
  },
  methods: {
    // 导出
    handleExport() {
      const vm = this
      const { code, name_ch, name_en } = vm.queryParam
      const params = { code, name_ch, name_en }
      //   vm.handleExportxlsx(vm.exportUrl, { params })
      vm.downLoadParams = params
      vm.formVisibleDown = true
    }
  }
}
</script>

<style lang="scss" scoped></style>
